@import "../../config";

// 主页菜单
.home-menu {
  @extend .full-screen;
  opacity: 0;
  z-index: -1;
  transition: $defaultTransition;

  // 显示
  &.show {
    opacity: 1;
    z-index: 10;
  }

  // 用于点击空白处关闭菜单页
  .cover {
    @extend .full-screen;
    z-index: 1;
  }

  // 菜单页内容容器
  .main {
    @extend .full-screen;
    height: 0;
    z-index: 10;

    // 右上角按钮
    .config {
      position: absolute;
      top: 30px;
      right: 30px;

      button {
        margin-right: 10px;
        color: #ffffff;
        font-size: $fontMedium;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.35);
        transition: $defaultTransition;

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          color: rgba(255, 255, 255, 0.65);
        }
      }
    }

    // 便笺
    .note {
      position: absolute;
      top: 200px;
      left: 50%;
      transform: translateX(-50%);
      $noteWidth: 620px;

      // 便笺内容
      .content {
        textarea {
          padding: 10px;
          margin-bottom: 10px;
          width: $noteWidth;
          height: 180px;
          background: rgba(255, 255, 255, 0.6);
          border-radius: 15px;
          font-size: $fontSmall;
          resize: none;
          box-shadow: $defaultBoxShadow;

          &::placeholder {
            transition: $defaultTransition;
          }

          &:hover::placeholder {
            color: #333333;
          }
        }
      }

      // 便笺列表
      .list {
        display: flex;
        flex-wrap: wrap;
        width: $noteWidth;

        // 列表项
        .item {
          margin: 5px;
          padding: 10px;
          width: $noteWidth / 3 - 10;
          font-size: $fontSmall;
          line-height: 1.6;
          border-radius: 6px;
          background: rgba(255, 255, 255, 0.1);
          transition: $defaultTransition;
          box-shadow: $defaultBoxShadow;
          cursor: pointer;
          user-select: none;

          // 标题
          .title {
            color: rgba(255, 255, 255, 0.9);
            font-size: $fontSmall + 1;
            // 单行文本溢出显示省略号
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          // 时间
          .time {
            color: rgba(255, 255, 255, 0.3);
          }

          // 操作
          .action {
            display: flex;
            margin-top: 5px;

            button {
              flex: 1;
              padding: 5px;
              margin-right: 10px;
              color: rgba(0, 0, 0, 0.3);
              cursor: pointer;
              transition: $defaultTransition;
              border-radius: 3px;

              &:last-child {
                margin-right: 0;
              }

              &:hover {
                background: rgba(0, 0, 0, 0.2);
              }
            }

            // 固定按钮
            .pin:hover, .pin.active {
              color: rgba(173, 255, 47, 0.8);
            }

            // 删除按钮
            .del:hover {
              color: rgba(255, 0, 0, 0.8);
            }
          }

          &:hover {
            background: rgba(255, 255, 255, 0.2);
            box-shadow: $defaultBoxShadowHover;
          }

          // 添加按钮
          .add {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            color: rgba(0, 0, 0, 0.3);
            transition: $defaultTransition;

            i {
              font-size: $fontBig;
            }

            &:hover {
              color: rgba(0, 0, 0, 0.5);
            }
          }
        }
      }
    }
  }
}
